<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <ui:composition template="#{contextPath}/layouts/default.xhtml">
        <ui:define name="title">#{text['home.title']}</ui:define>
        <ui:param name="menu" value="Home"/>

        <ui:define name="body">
            <h2><h:outputLabel value="#{text['home.heading']}" rendered="#{timeTrackerBean.currentUser.status == 'OUT'}"/> #{timeTrackerBean.currentUser.fullName}</h2>
            <h3>#{text['user.status']}: 
                <h:outputLabel value="#{text['user.in']}" rendered="#{timeTrackerBean.currentUser.status == 'IN'}"/>
                <h:outputLabel value="#{text['user.out']}" rendered="#{timeTrackerBean.currentUser.status == 'OUT'}"/>
            </h3>
            <p>#{text['home.message']}</p>

            <h:form id="editUser">
                <center>
                    <div style="width: 30%">
                        <!-- Photo -->
                        <div>
                            <img src="images/auser.png" alt="logo"></img>
                        </div>
                        <div style="width: 20em; text-align: center; margin: 10px auto; font-size: 16px; font-weight: 500;">
                            <span id="clock"></span>
                        </div>
                        <div class="form-group">
                            <h:outputLabel styleClass="control-label" for="reason" value="#{text['timecard.reason']}" rendered="#{timeTrackerBean.currentUser.status == 'IN'}"/>
                            <h:selectOneMenu value="#{timeTrackerBean.reason}" id="reason" styleClass="form-control" style="height: 38px" rendered="#{timeTrackerBean.currentUser.status == 'IN'}">
                                <f:selectItem itemLabel="Receso Personal" itemValue="Receso Personal"/>
                                <f:selectItem itemLabel="Receso" itemValue="Receso"/>
                                <f:selectItem itemLabel="Almuerzo" itemValue="Almuerzo"/>
                                <f:selectItem itemLabel="Salida" itemValue="Salida"/>
                            </h:selectOneMenu>
                        </div>

                        <div class="form-group form-actions">
                            <h:commandButton id="clock_in" value="#{text['button.clockin']}" rendered="#{timeTrackerBean.currentUser.status == 'OUT'}" action="#{timeTrackerBean.edit}" styleClass="btn btn-primary"/>
                            <h:commandButton id="clock_out" value="#{text['button.clockout']}" rendered="#{timeTrackerBean.currentUser.status == 'IN'}" action="#{timeTrackerBean.edit}" styleClass="btn btn-primary"/>
                        </div>
                    </div>
                </center>
            </h:form>
        </ui:define>
    </ui:composition>
</html>
